<template>
    <view>
      <view class="chat-header">
        <view v-if="chatList.title" class="title">{{ chatList.title }}</view>
      </view>
      <view class="chat-messages">
        <view v-for="msg in messages" :key="msg.id" :class="['message', msg.sender]">
          <view class="message-content">{{ msg.content }}</view>
        </view>
      </view>
      <view class="chat-input">
        <input v-model="newMessage" placeholder="输入消息..." />
        <button @click="sendMessage">发送</button>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  
  const chatList = ref({})
  const route = useRoute()
  
  const messages = ref([])
  const newMessage = ref('')
  
  onMounted(() => {
    if (route.query.data) {
      const data = JSON.parse(route.query.data)
      chatList.value = data
      messages.value.push({
        id: 1,
        content: '您好，有什么可以帮您的吗？',
        sender: 'customerService'
      })
    }
  })
  
  const sendMessage = () => {
    if (newMessage.value.trim() !== '') {
      messages.value.push({
        id: messages.value.length + 1,
        content: newMessage.value,
        sender: 'user'
      })
      setTimeout(() => {
        messages.value.push({
          id: messages.value.length + 1,
          content: '感谢您的消息，我们会尽快回复您。',
          sender: 'customerService'
        })
      }, 1000)
      newMessage.value = ''
    }
  }
  </script>
  
  <style lang="scss">
  .chat-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    padding-bottom: 60px;
  }
  .message {
    display: flex;
    margin-bottom: 10px;
  }
  .message.user {
    justify-content: flex-end;
  }
  .message.customerService {
    justify-content: flex-start;
  }
  .message-content {
    padding: 10px;
    border-radius: 5px;
    max-width: 70%;
    background-color: #d1e7dd;
  }
  .message.user .message-content {
    background-color: #d1e7dd;
  }
  .message.customerService .message-content {
    background-color: #f8d7da;
  }
  .chat-input {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  }
  .chat-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
  }
  .chat-input button {
    margin-right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>